<div class="row">
    <div class="col-md-12">
        <div class="alert alert-warning">
            <h4 class="block">引入FlotCharts</h4>
            <p> flotchart纯jquery脚本库的图标控件，其支持在一个图表中同时叠加折线图、面积图、柱形图/条形图等不同的形式，而且其支持扩展插件，通过扩展插件还可以支持堆积柱形图和饼图等以及支持缩放和选区等功能。更多参考官方
                <a href="http://www.flotcharts.org/" target="_blank">FlotCharts文档</a>。
            </p>
        </div>
        <div class="panel panel-widget light bordered">
            <div class="panel-heading">
                <div class="caption">
                    <i class="fa fa-line-chart"></i>折线图
                </div>
            </div>
            <div class="portlet-body">
                <div id="placeholder" class="demo-placeholder" style="height:400px;"></div>
            </div>
        </div>
        <div class="panel panel-widget light bordered">
            <div class="panel-heading">
                <div class="caption">
                    <i class="fa fa-line-chart"></i>对比折线图
                </div>
            </div>
            <div class="portlet-body">
                <div id="lineChart" style="height:400px;"></div>
            </div>
        </div>
        <div class="panel panel-widget light bordered">
            <div class="panel-heading">
                <div class="caption">
                    <i class="fa fa-line-chart"></i>实时动态图
                </div>
            </div>
            <div class="portlet-body">
                <div id="realTimeChart" style="height:400px;"></div>
            </div>
        </div>
        <div class="panel panel-widget light bordered">
            <div class="panel-heading">
                <div class="caption">
                    <i class="fa fa-line-chart"></i>交互图
                </div>
            </div>
            <div class="portlet-body">
                <div id="interactiveChart" style="height:400px;"></div>
            </div>
        </div>
        <div class="panel panel-widget light bordered">
            <div class="panel-heading">
                <div class="caption">
                    <i class="fa fa-bar-chart"></i>柱状图
                </div>
            </div>
            <div class="portlet-body">
                <div id="barChart" style="height:400px;"></div>
            </div>
        </div>
        <div class="panel panel-widget light bordered">
            <div class="panel-heading">
                <div class="caption">
                    <i class="fa fa-bar-chart"></i>横向柱状图
                </div>
            </div>
            <div class="portlet-body">
                <div id="barHChart" style="height:400px;"></div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="panel panel-widget light bordered">
            <div class="panel-heading">
                <div class="caption">
                    <i class="fa fa-pie-chart"></i>饼状图1
                </div>
            </div>
            <div class="portlet-body">
                <div id="pieChart1" style="height:400px;"></div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="panel panel-widget light bordered">
            <div class="panel-heading">
                <div class="caption">
                    <i class="fa fa-pie-chart"></i>饼状图2
                </div>
            </div>
            <div class="portlet-body">
                <div id="pieChart2" style="height:400px;"></div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="mu-tabbable border-remove">
            <ul class="nav nav-tabs ">
                <li class="active"><a href="#tab_5_1" data-toggle="tab">交互图</a>
                </li>
                <li><a href="#tab_5_2" data-toggle="tab">柱状图</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab_5_1">
                    <pre class="prettyprint">
&lt;div id="interactiveChart" style="height:400px;"&gt;&lt;/div&gt;
&lt;script language="javascript" type="text/javascript" src="../../assets/plugins/flot/jquery.flot.js"&gt;&lt;/script&gt;
&lt;script&gt;
$(function() {

    function data() {
        return Math.floor(21 * Math.random()) + 20
    }

    function t(e, t, i) {
        $('<div id="tooltip">' + i + "</div>").css({
            position: "absolute",
            display: "none",
            top: t + 5,
            left: e + 15,
            border: "1px solid #333",
            padding: "4px",
            color: "#fff",
            "border-radius": "3px",
            "background-color": "#333",
            opacity: .8
        }).appendTo("body").fadeIn(200)
    }
    if (1 == $("#interactiveChart").size()) {
        var i = [
                [1, data()],
                [2, data()],
                [3, 2 + data()],
                [4, 3 + data()],
                [5, 5 + data()],
                [6, 10 + data()],
                [7, 15 + data()],
                [8, 20 + data()],
                [9, 25 + data()],
                [10, 30 + data()],
                [11, 35 + data()],
                [12, 25 + data()],
                [13, 15 + data()],
                [14, 20 + data()],
                [15, 45 + data()],
                [16, 50 + data()],
                [17, 65 + data()],
                [18, 70 + data()],
                [19, 85 + data()],
                [20, 80 + data()],
                [21, 75 + data()],
                [22, 80 + data()],
                [23, 75 + data()],
                [24, 70 + data()],
                [25, 65 + data()],
                [26, 75 + data()],
                [27, 80 + data()],
                [28, 85 + data()],
                [29, 90 + data()],
                [30, 95 + data()]
            ],
            r = [
                [1, data() - 5],
                [2, data() - 5],
                [3, data() - 5],
                [4, 6 + data()],
                [5, 5 + data()],
                [6, 20 + data()],
                [7, 25 + data()],
                [8, 36 + data()],
                [9, 26 + data()],
                [10, 38 + data()],
                [11, 39 + data()],
                [12, 50 + data()],
                [13, 51 + data()],
                [14, 12 + data()],
                [15, 13 + data()],
                [16, 14 + data()],
                [17, 15 + data()],
                [18, 15 + data()],
                [19, 16 + data()],
                [20, 17 + data()],
                [21, 18 + data()],
                [22, 19 + data()],
                [23, 20 + data()],
                [24, 21 + data()],
                [25, 14 + data()],
                [26, 24 + data()],
                [27, 25 + data()],
                [28, 26 + data()],
                [29, 27 + data()],
                [30, 31 + data()]
            ],
            o = ($.plot($("#interactiveChart"), [{
                data: i,
                label: "Unique Visits",
                lines: {
                    lineWidth: 1
                },
                shadowSize: 0
            }, {
                data: r,
                label: "Page Views",
                lines: {
                    lineWidth: 1
                },
                shadowSize: 0
            }], {
                series: {
                    lines: {
                        show: !0,
                        lineWidth: 2,
                        fill: !0,
                        fillColor: {
                            colors: [{
                                opacity: .05
                            }, {
                                opacity: .01
                            }]
                        }
                    },
                    points: {
                        show: !0,
                        radius: 3,
                        lineWidth: 1
                    },
                    shadowSize: 2
                },
                grid: {
                    hoverable: !0,
                    clickable: !0,
                    tickColor: "#eee",
                    borderColor: "#eee",
                    borderWidth: 1
                },
                colors: ["#d12610", "#37b7f3", "#52e136"],
                xaxis: {
                    ticks: 11,
                    tickDecimals: 0,
                    tickColor: "#eee"
                },
                yaxis: {
                    ticks: 11,
                    tickDecimals: 0,
                    tickColor: "#eee"
                }
            }), null);
        $("#interactiveChart").bind("plothover", function(e, i, r) {
            if ($("#x").text(i.x.toFixed(2)), $("#y").text(i.y.toFixed(2)), r) {
                if (o != r.dataIndex) {
                    o = r.dataIndex, $("#tooltip").remove();
                    var a = r.datapoint[0].toFixed(2),
                        s = r.datapoint[1].toFixed(2);
                    t(r.pageX, r.pageY, r.series.label + " of " + a + " = " + s)
                }
            } else $("#tooltip").remove(), o = null
        })
    }
});
&lt;/script&gt;

                    </pre>
                </div>
                <div class="tab-pane" id="tab_5_2">
                    <pre class="prettyprint">
&lt;div id="barChart" style="height:400px;"&gt;&lt;/div&gt;
&lt;script language="javascript" type="text/javascript" src="../../assets/plugins/flot/jquery.flot.js"&gt;&lt;/script&gt;
&lt;script language="javascript" type="text/javascript" src="../../assets/plugins/flot/jquery.flot.categories.js"&gt;&lt;/script&gt;
&lt;script language="javascript" type="text/javascript" src="../../assets/plugins/flot/jquery.flot.orderBars.js"&gt;&lt;/script&gt;
&lt;script&gt;
$(function () {
    function getData() {
        var data = [];

        data.push({
            data: [[0.5, 1], [1, 4], [2, 2]],
            color: "#d40b07"
        });

        data.push({
            data: [[0.5, 5], [1, 3], [2, 1]],
            color: "##529500"
        });

        return data;
    }
    // ORDERED CHART
    var d = getData();
    for(var i = 0; i&lt;d.length; i++) {
        d[i].bars = {
            order: i
        }
    }

    $.plot($('#barChart'), d, {
        series: {
            bars: {
                show: !0 
            }
        },
        bars: {
            barWidth: 0.05,
            lineWidth: 0,
            fill: true

        },
        grid: {
            tickColor: "#eee",
            borderColor: "#eee",
            borderWidth: 1
        },
        xaxis:{
        min: 0,
        max: 3
        }
    });
});
&lt;/script&gt;

                    </pre>
                </div>
            </div>
        </div>
    </div>
</div>
<script language="javascript" type="text/javascript" src="../../assets/plugins/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../../assets/plugins/flot/jquery.flot.crosshair.js"></script>
<script language="javascript" type="text/javascript" src="../../assets/plugins/flot/jquery.flot.categories.js"></script>
<script language="javascript" type="text/javascript" src="../../assets/plugins/flot/jquery.flot.orderBars.js"></script>
<script language="javascript" type="text/javascript" src="../../assets/plugins/flot/jquery.flot.pie.js"></script>
<script>
$(function() {

    var d1 = [];
    for (var i = 0; i < Math.PI * 2; i += 0.25) {
        d1.push([i, Math.sin(i)]);
    }

    var d2 = [];
    for (var i = 0; i < Math.PI * 2; i += 0.25) {
        d2.push([i, Math.cos(i)]);
    }

    var d3 = [];
    for (var i = 0; i < Math.PI * 2; i += 0.1) {
        d3.push([i, Math.tan(i)]);
    }

    $.plot("#placeholder", [{
        label: "sin(x)",
        data: d1,
        lines: {
            lineWidth: 1
        },
        shadowSize: 0
    }, {
        label: "cos(x)",
        data: d2,
        lines: {
            lineWidth: 1
        },
        shadowSize: 0
    }, {
        label: "tan(x)",
        data: d3,
        lines: {
            lineWidth: 1
        },
        shadowSize: 0
    }], {
        series: {
            lines: {
                show: !0
            },
            points: {
                show: !0,
                fill: !0,
                radius: 3,
                lineWidth: 1
            }
        },
        xaxis: {
            tickColor: "#eee",
            ticks: [0, [Math.PI / 2, "π/2"],
                [Math.PI, "π"],
                [3 * Math.PI / 2, "3π/2"],
                [2 * Math.PI, "2π"]
            ]
        },
        yaxis: {
            tickColor: "#eee",
            ticks: 10,
            min: -2,
            max: 2
        },
        grid: {
            borderColor: "#eee",
            borderWidth: 1
        }
    });
});

$(function() {

    var sin = [],
        cos = [];
    for (var i = 0; i < 14; i += 0.1) {
        sin.push([i, Math.sin(i)]);
        cos.push([i, Math.cos(i)]);
    }

    plot = $.plot("#lineChart", [{
        data: sin,
        label: "sin(x) = -0.00",
        lines: {
            lineWidth: 1
        },
        shadowSize: 0
    }, {
        data: cos,
        label: "cos(x) = -0.00",
        lines: {
            lineWidth: 1
        },
        shadowSize: 0
    }], {
        series: {
            lines: {
                show: !0
            }
        },
        crosshair: {
            mode: "x"
        },
        grid: {
            hoverable: !0,
            autoHighlight: !1,
            tickColor: "#eee",
            borderColor: "#eee",
            borderWidth: 1
        },
        yaxis: {
            min: -1.2,
            max: 1.2
        }
    });

    var legends = $("#lineChart .legendLabel");

    legends.each(function() {
        // fix the widths so they don't jump around
        $(this).css('width', $(this).width());
    });

    var updateLegendTimeout = null;
    var latestPosition = null;

    function updateLegend() {

        updateLegendTimeout = null;

        var pos = latestPosition;

        var axes = plot.getAxes();
        if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max ||
            pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) {
            return;
        }

        var i, j, dataset = plot.getData();
        for (i = 0; i < dataset.length; ++i) {

            var series = dataset[i];

            // Find the nearest points, x-wise

            for (j = 0; j < series.data.length; ++j) {
                if (series.data[j][0] > pos.x) {
                    break;
                }
            }

            // Now Interpolate

            var y,
                p1 = series.data[j - 1],
                p2 = series.data[j];

            if (p1 == null) {
                y = p2[1];
            } else if (p2 == null) {
                y = p1[1];
            } else {
                y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
            }

            legends.eq(i).text(series.label.replace(/=.*/, "= " + y.toFixed(2)));
        }
    }

    $("#lineChart").bind("plothover", function(event, pos, item) {
        latestPosition = pos;
        if (!updateLegendTimeout) {
            updateLegendTimeout = setTimeout(updateLegend, 50);
        }
    });
});


$(function() {

    // We use an inline data source in the example, usually data would
    // be fetched from a server

    var data = [],
        totalPoints = 300;

    function getRandomData() {

        if (data.length > 0)
            data = data.slice(1);

        // Do a random walk

        while (data.length < totalPoints) {

            var prev = data.length > 0 ? data[data.length - 1] : 50,
                y = prev + Math.random() * 10 - 5;

            if (y < 0) {
                y = 0;
            } else if (y > 100) {
                y = 100;
            }

            data.push(y);
        }

        // Zip the generated y values with the x values

        var res = [];
        for (var i = 0; i < data.length; ++i) {
            res.push([i, data[i]])
        }

        return res;
    }

    // Set up the control widget

    var updateInterval = 20;

    var plot = $.plot("#realTimeChart", [getRandomData()], {
        series: {
            shadowSize: 1
        },
        lines: {
            show: !0,
            lineWidth: .5,
            fill: !0,
            fillColor: {
                colors: [{
                    opacity: .1
                }, {
                    opacity: 1
                }]
            }
        },
        yaxis: {
            min: 0,
            max: 100,
            tickColor: "#eee",
            tickFormatter: function(e) {
                return e + "%"
            }
        },
        xaxis: {
            show: !1
        },
        colors: ["#6ef146"],
        grid: {
            tickColor: "#eee",
            borderWidth: 0
        }
    });

    function update() {

        plot.setData([getRandomData()]);

        // Since the axes don't change, we don't need to call plot.setupGrid()

        plot.draw();
        setTimeout(update, updateInterval);
    }

    update();
});

$(function() {

    function data() {
        return Math.floor(21 * Math.random()) + 20
    }

    function t(e, t, i) {
        $('<div id="tooltip">' + i + "</div>").css({
            position: "absolute",
            display: "none",
            top: t + 5,
            left: e + 15,
            border: "1px solid #333",
            padding: "4px",
            color: "#fff",
            "border-radius": "3px",
            "background-color": "#333",
            opacity: .8
        }).appendTo("body").fadeIn(200)
    }
    if (1 == $("#interactiveChart").size()) {
        var i = [
                [1, data()],
                [2, data()],
                [3, 2 + data()],
                [4, 3 + data()],
                [5, 5 + data()],
                [6, 10 + data()],
                [7, 15 + data()],
                [8, 20 + data()],
                [9, 25 + data()],
                [10, 30 + data()],
                [11, 35 + data()],
                [12, 25 + data()],
                [13, 15 + data()],
                [14, 20 + data()],
                [15, 45 + data()],
                [16, 50 + data()],
                [17, 65 + data()],
                [18, 70 + data()],
                [19, 85 + data()],
                [20, 80 + data()],
                [21, 75 + data()],
                [22, 80 + data()],
                [23, 75 + data()],
                [24, 70 + data()],
                [25, 65 + data()],
                [26, 75 + data()],
                [27, 80 + data()],
                [28, 85 + data()],
                [29, 90 + data()],
                [30, 95 + data()]
            ],
            r = [
                [1, data() - 5],
                [2, data() - 5],
                [3, data() - 5],
                [4, 6 + data()],
                [5, 5 + data()],
                [6, 20 + data()],
                [7, 25 + data()],
                [8, 36 + data()],
                [9, 26 + data()],
                [10, 38 + data()],
                [11, 39 + data()],
                [12, 50 + data()],
                [13, 51 + data()],
                [14, 12 + data()],
                [15, 13 + data()],
                [16, 14 + data()],
                [17, 15 + data()],
                [18, 15 + data()],
                [19, 16 + data()],
                [20, 17 + data()],
                [21, 18 + data()],
                [22, 19 + data()],
                [23, 20 + data()],
                [24, 21 + data()],
                [25, 14 + data()],
                [26, 24 + data()],
                [27, 25 + data()],
                [28, 26 + data()],
                [29, 27 + data()],
                [30, 31 + data()]
            ],
            o = ($.plot($("#interactiveChart"), [{
                data: i,
                label: "Unique Visits",
                lines: {
                    lineWidth: 1
                },
                shadowSize: 0
            }, {
                data: r,
                label: "Page Views",
                lines: {
                    lineWidth: 1
                },
                shadowSize: 0
            }], {
                series: {
                    lines: {
                        show: !0,
                        lineWidth: 2,
                        fill: !0,
                        fillColor: {
                            colors: [{
                                opacity: .05
                            }, {
                                opacity: .01
                            }]
                        }
                    },
                    points: {
                        show: !0,
                        radius: 3,
                        lineWidth: 1
                    },
                    shadowSize: 2
                },
                grid: {
                    hoverable: !0,
                    clickable: !0,
                    tickColor: "#eee",
                    borderColor: "#eee",
                    borderWidth: 1
                },
                colors: ["#d12610", "#37b7f3", "#52e136"],
                xaxis: {
                    ticks: 11,
                    tickDecimals: 0,
                    tickColor: "#eee"
                },
                yaxis: {
                    ticks: 11,
                    tickDecimals: 0,
                    tickColor: "#eee"
                }
            }), null);
        $("#interactiveChart").bind("plothover", function(e, i, r) {
            if ($("#x").text(i.x.toFixed(2)), $("#y").text(i.y.toFixed(2)), r) {
                if (o != r.dataIndex) {
                    o = r.dataIndex, $("#tooltip").remove();
                    var a = r.datapoint[0].toFixed(2),
                        s = r.datapoint[1].toFixed(2);
                    t(r.pageX, r.pageY, r.series.label + " of " + a + " = " + s)
                }
            } else $("#tooltip").remove(), o = null
        })
    }
});

$(function () {
    function getData() {
        var data = [];

        data.push({
            data: [[0.5, 1], [1, 4], [2, 2]],
            color: "#d40b07"
        });

        data.push({
            data: [[0.5, 5], [1, 3], [2, 1]],
            color: "##529500"
        });

        return data;
    }
    // ORDERED CHART
    var d = getData();
    for(var i = 0; i<d.length; i++) {
        d[i].bars = {
            order: i
        }
    }

    $.plot($('#barChart'), d, {
        series: {
            bars: {
                show: !0 
            }
        },
        bars: {
            barWidth: 0.05,
            lineWidth: 0,
            fill: true

        },
        grid: {
            tickColor: "#eee",
            borderColor: "#eee",
            borderWidth: 1
        },
        xaxis:{
        min: 0,
        max: 3
        }
    });
});

$(function() {
    var o = [
            [10, 10],
            [20, 20],
            [30, 30],
            [40, 40],
            [50, 50]
        ],
        r = {
            series: {
                bars: {
                    show: !0
                }
            },
            bars: {
                horizontal: !0,
                barWidth: 6,
                lineWidth: 0,
                shadowSize: 0,
                align: "left"
            },
            grid: {
                tickColor: "#eee",
                borderColor: "#eee",
                borderWidth: 1
            }
        };
    0 !== $("#barHChart").size() && $.plot($("#barHChart"), [o], r);
});

$(function() {
    var data = [],
        series = Math.floor(Math.random() * 6) + 3;

    for (var i = 0; i < series; i++) {
        data[i] = {
            label: "Series" + (i + 1),
            data: Math.floor(Math.random() * 100) + 1
        }
    }

    var pieChart1 = $("#pieChart1"),
        pieChart2 = $("#pieChart2");

    $.plot(pieChart1, data, {
        series: {
            pie: {
                show: !0
            }
        }
    });
    $.plot(pieChart2, data, {
        series: {
            pie: {
                show: !0
            }
        },
        legend: {
            show: !1
        }
    });
});
window.prettyPrint();
</script>
